<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>通知详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form ref="infoForm" label-width="140px">
          <el-form-item label="通知标题:" prop="title">
            <p>{{ infoForm.title }}</p>
          </el-form-item>
          <el-form-item label="要求送达时间:">
            <p>{{ infoForm.time }}</p>
          </el-form-item>
          <el-form-item label="通知范围:">
            <div>
              <span v-if="infoForm.type==0">全校</span>
              <span v-if="infoForm.type==1">特定年段</span>
              <span v-if="infoForm.type==2">特定班级</span>
            </div>
          </el-form-item>
          <el-form-item label="特定年段:" v-if="infoForm.type==1">
            <el-tag
              :key="index"
              v-for="(tag,index) in editBody.section_id"
              class="mr-10"
            >{{ tag.section_name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="特定班级:" v-if="infoForm.type==2">
            <el-tag
              :key="index"
              v-for="(tag,index) in dynamicClassTags"
              class="mr-10"
            >{{ tag.class_name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="特定学生:" v-if="dynamicTags.length">
            <el-tag
              :key="index"
              v-for="(tag,index) in dynamicTags"
              class="mr-10"
            >{{ tag.name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="通知内容:" prop="title">
            <div v-html="infoForm.body" class="ql-editor">
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {yeartime} from "@/assets/js/common";
import quillConfig from '@/assets/js/quill-config.js'
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: quillConfig,
      dialogVisible: false,
      studentVisible: false,
      classVisible: false,
      infoForm: {
        title: '',
        body: '',
        type: '0',
        class_id: '',
        section_id: '',
        time: yeartime(new Date()),
        student_id: 0,
        id: this.$route.query.editId
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      dynamicTags: [],
      dynamicClassTags: [],
      dynamicTagsArray: {},
      visibleType: 0,
      studentRadio: 0,
      value1: [],
      sectionList: [],
      editBody: null
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.sectionListFn()
        this.Inint()
      } else {
        this.dynamicTags = []
        this.dynamicClassTags = []
        this.dynamicTagsArray = {}
        this.visibleType = 0
        this.studentRadio = 0
        this.value1 = []
        this.sectionList = []
        this.infoForm = {
          title: '',
          body: '',
          type: '0',
          class_id: '',
          section_id: '',
          time: '',
          student_id: 0,
          id: 0
        }
      }
    }
  },
  created() {

  },
  methods: {
    Inint() {
      let n = this
      this.$fetch(this.api.admin_notice_detail, {id: this.detailId}).then((response) => {
        if (!response.code) {
          console.log('收到的数据') // studentRadio 0 否 1 是
          this.infoForm.title = response.vo.title
          this.infoForm.body = response.vo.body
          this.infoForm.type = response.vo.type
          this.infoForm.time = response.vo.time.split(' ')[0]
          // 0全校 1特定年段 2特定班级
          // setTimeout(() => {
          if (response.vo.type === 1) {
            let id_ = []
            for (let item of response.vo.section_id) {
              id_.push(item.id)
            }
            n.value1 = n.getJson(id_)
          } else if (response.vo.type === 2) {
            n.dynamicClassTags = n.getJson(response.vo.class_id)
          }
          // 有特定学生
          if (response.vo.student_id) {
            n.studentRadio = 1
            n.dynamicTags = n.getJson(response.vo.student_id)
          }
          // }, 300)
          n.editBody = response.vo
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    chooseStudent(option) {
      // dynamicClassTags         dynamicTags: [] dynamicClassTags: []
      this.visibleType = option
      let mew_ = {}
      if (option === 1) {
        for (let item of this.dynamicClassTags) {
          mew_[item.id] = item
        }
        this.dynamicTagsArray = JSON.parse(JSON.stringify(mew_))
        this.classVisible = true
      } else {
        for (let item of this.dynamicTags) {
          mew_[item.id] = item
        }
        this.dynamicTagsArray = JSON.parse(JSON.stringify(mew_))
        this.studentVisible = true
      }
    },
    checkEditFn() {
      if (!this.infoForm[this.itemlable]) {
        this.$message.error('请填写信息');
        return
      }
      this.$emit('checkList', {name: this.itemlable, val: this.infoForm[this.itemlable]})
      this.closePOpup()
    },
    onSubmit() {
      let dataOption = JSON.parse(JSON.stringify(this.infoForm))
      if (!dataOption.title) {
        this.$message.error('请填写通知标题')
        return
      }
      if (Number(dataOption.type) === 1 && !this.value1.length) {
        this.$message.error('请选择特定年段')
        return
      }
      if (Number(dataOption.type) === 2 && !this.dynamicClassTags.length) {
        this.$message.error('请选择特定班级')
        return
      }
      if (this.studentRadio === 1 && !this.dynamicTags.length) {
        this.$message.error('请选择特定学生')
        return
      }
      if (!dataOption.body) {
        this.$message.error('请填写通知内容')
        return
      }
      let a = []
      for (let item of this.dynamicClassTags) {
        a.push(item.id)
      }
      let b = []
      for (let item of this.dynamicTags) {
        b.push(item.id)
      }
      dataOption.class_id = a.join(',')
      dataOption.section_id = this.value1.join(',')
      dataOption.student_id = b.join(',')
      dataOption.id = this.detailId;
      console.log('dataFrom:', dataOption)
      this.$post(this.api.admin_notice_detail, this.dataOption).then(res => {
        if (res.code === 0) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.closePOpup()
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    sectionListFn() {
      this.$post(this.api.admin_section_index, {
        p: 1
      }).then((response) => {
        if (response.code === 0) {
          this.sectionList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    studentFn(option) {
      let list = []
      for (let i in option) {
        list.push(option[i])
      }
      if (this.visibleType === 1) {
        this.dynamicClassTags = JSON.parse(JSON.stringify(list))
      } else {
        this.dynamicTags = JSON.parse(JSON.stringify(list))
      }
    },
    handleClose(index, type) {
      if (type === 1) {
        this.dynamicClassTags.splice(index, 1)
      } else {
        this.dynamicTags.splice(index, 1)
      }
    },
    onEditorReady(editor) {
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 70%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}

</style>


